<%@ page import="util.PhoneKind"%>
<%@ include file="include/header.jsp"%>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<h2 class="center">Add a new contact</h2>
<form action="./AddContact.htm" method="POST">
	<div class="row-fluid">
		<div class="span6">
			<h3 class="center">Contact informations</h3>
			<table>
				<tr>
					<td align="right">First name (*) :</td>
					<td><input type="text" name="firstName" required /></td>
				</tr>
				<tr>
					<td align="right">Last name :</td>
					<td><input type="text" name="lastName" /></td>
				</tr>
				<tr>
					<td align="right">Email :</td>
					<td><input type="email" name="emailC" /></td>
				</tr>
				<tr>
					<td align="right">Siret :</td>
					<td><input type="number" min="0" step="1" pattern="\d+"
						name="siret" /></td>
				</tr>
			</table>
		</div>
		<div class="span6">
			<h3 class="center">Address</h3>
			<table>
				<tr>
					<td align="right">Street :</td>
					<td><input type="text" name="street" id="street"/></td>
				</tr>
				<tr>
					<td align="right">City :</td>
					<td><input type="text" name="city" id="city"/></td>
				</tr>
				<tr>
					<td align="right">Zip code :</td>
					<td><input type="text" name="zip" id="zip"/></td>
				</tr>
				<tr>
					<td align="right">Country :</td>
					<td><input type="text" name="country" id="country"/></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<!-- Button trigger modal -->
						<button class="btn btn-primary btn-lg" data-toggle="modal"
							data-target="#modalAddress" onclick="getAllAddressAjax()">Choose a existing address</button>
					</td>
				</tr>

			</table>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span6">
			<div></div>
			<h3>Phone numbers</h3>
			<div id="phoneLine" style="visibility: hidden; height: 0">
				<select name="kindTypes">
					<%
						for (PhoneKind kind : PhoneKind.values()) {
					%><option><%=kind%></option>
					<%
						}
					%>
				</select> <input type="tel" name="phoneNumbers" placeholder="number" /><br />
			</div>
			<div id="phones"></div>
			<p class="btn btn-primary" onClick="addPhoneNumber()">Add a phone
				number</p>
		</div>
		<div class="span6">
			<div></div>
			<h3>Groups</h3>
			<c:if test="${groups == null}">
				<p>No groups available</p>
			</c:if>
			<c:if test="${groups != null}">
				<p>Select many groups</p>
				<c:forEach items="${groups}" var="group" varStatus="status">
					<input type="checkbox" value="${group.groupId}" name="groups" /> ${group.groupName}<br />
				</c:forEach>
			</c:if>

		</div>
	</div>
	<hr>
	<div class="row-fluid" style="margin-top: 10px">
		<input type="reset" class="btn btn-danger btn-large" value="Reset" />
		<input type="submit" class="btn btn-success btn-large" value="Create" />
	</div>

	<!-- Modal Part -->
	<div class="modal fade" id="modalAddress" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Choose an address</h4>
				</div>
				<div class="modal-body" id="myAddressContent">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" onClick="addHideAddress()">Choose</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
	<div id="selectedAddressDiv">
	
	</div>
</form>

<%@ include file="include/footer.jsp"%>